<template>
  <div>
    <h1>App</h1>
    <el-text class="mx-1" type="success">Success</el-text>
    <el-button type="primary">Button</el-button>
    <el-button type="success" icon="">Button</el-button>
    <el-icon size="25" color="red">
      <i-ep-edit></i-ep-edit>
    </el-icon>
    <el-icon size="25" color="red"><i-ep-dish></i-ep-dish></el-icon>
    <el-button type="primary">
      Upload
      <el-icon class="el-icon--right"><i-ep-upload /></el-icon>
    </el-button>
    <el-button type="primary">
      Upload
      <el-icon class="el-icon--right"><Upload /></el-icon>
    </el-button>
    <el-button type="primary" :icon="Edit" />
    <el-button type="primary" :icon="Share" />
    <el-button type="primary" :icon="Delete" />
    <el-button type="primary" :icon="Search">Search</el-button>
    <i-ep-dish></i-ep-dish>
    <svg-icon name="home" color="pink"></svg-icon>
    <el-pagination
      current-page="1"
      page-size="10"
      :page-sizes="[100, 200, 300, 400]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400"
    />
  </div>
</template>

<script lang="ts" setup>
import { Delete, Edit, Search, Share, Upload } from '@element-plus/icons-vue'
</script>

<style scoped></style>
